import type { TabsProps } from 'antd';
import { useImperativeHandle, useMemo, useState } from 'react';
import { TextArea } from '../../../../baseComponent';
import { Tabs } from '../../../../functionalComponent';
import { borderStyle, cssVar } from '../../../../util';
export default function ({ currentFunc, childRef }) {
  const [activeKey, setactiveKey] = useState('1');
  const [validInfo, setValidInfo] = useState('');
  useImperativeHandle(childRef, () => {
    return {
      changeActiveKeyAndParmam
    };
  });

  const changeActiveKeyAndParmam = (n, d) => {
    setactiveKey(n);
    if (typeof d === 'string') {
      setValidInfo(d);
    } else {
      setValidInfo(JSON.stringify(d));
    }
  };
  const items: TabsProps['items'] = useMemo(() => {
    return [
      {
        key: '1',
        label: '函数说明',
        children: (
          <div style={{ overflow: 'auto', height: '100%', padding: '4px 11px', borderRadius: 4, ...borderStyle() }}>
            <FuncExplain info={currentFunc} />
          </div>
        )
      },
      {
        key: '2',
        label: '公式校验',
        children: <FormulaField data={validInfo} />
      }
    ];
  }, [currentFunc, validInfo]);
  return (
    <div style={{ height: 150 }}>
      <Tabs defaultActiveKey="1" items={items} activeKey={activeKey} onChange={(d) => setactiveKey(d)} />
    </div>
  );
}

function FuncExplain({ info }) {
  return (
    info && (
      <div>
        <div style={{ fontWeight: 'bold' }}>{info.funcFullNameWithParam}</div>
        <div>
          <span style={{ fontWeight: 'bold' }}>名称:</span>
          <span>{info.funcChnName}</span>
        </div>
        <div>
          <span style={{ fontWeight: 'bold' }}>功能:</span>
          <span>{info.funcExplain}</span>
        </div>

        <div className={'params'}>
          <span style={{ fontWeight: 'bold' }}>参数:</span>
          <div className={'paramsItem'}>
            {info.params.map((item) => (
              <span key={item}>{item}</span>
            ))}
          </div>
        </div>
        <div>
          <span style={{ fontWeight: 'bold' }}>返回值:</span>
          <span>{info.returnType}</span>
        </div>
      </div>
    )
  );
}

function FormulaField({ data }) {
  return <TextArea value={data} disabled style={{ height: '100%', background: '#fff', color: cssVar.textColor }} />;
}
